<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>健康管理</title>
</head>
<style>
  table{
    width: 330px;
    border-right: 1px solid #E8F1FF;
    border-bottom: 1px solid #E8F1FF;
    margin-top: -10px;
  }
  input{
    outline: none;
  }
  table th{
    border-left: 1px solid #E8F1FF;
    border-top: 1px solid #E8F1FF;
    font-weight: normal;
    font-size: 13px;
    text-align: center;
  }
  table th a{
    display: inline-block;
    width: 36px;
    height: 17px;
    text-decoration: none;
    background: #E0ECFF;
    color: #1AB394;
    margin-right: 2px;
    border-radius: 10px;
    opacity: 0.8;
  }
  table th a:hover{
    cursor: pointer;
    opacity: 1;
  }

  .tbl{
    position: absolute;
    left: 348px;
    top: 41px;
    width: 994px;
    height: 347px;
    border: 1px solid #cccc;
  }
  .tbl .left{
    width: 160px;
    height: 100%;
    float: left;
    border-top: 1px solid #cccc;
    position: relative;
  }
  .tbl .left img{
    position: absolute;
    display: inline-block;
    left: 13px;
    top: 62px;
    width: 150px;
    height: 210px;
    border: 1px solid #cccc;
  }
  .tbl .right{
    width: 817px;
    height: 100%;
    float: right;

  }
  .tbl .right .rowDiv{
    width: 100%;
    border: 1px solid #cccc;
    height: 48px;
    position: relative;
  }
  .tbl .right .rowDiv .spDiv{
    display: inline-block;
    width: 112px;
    background-color: #E0ECFF;
    height: 100%;
    position: absolute;
    top: 0px;
    text-align: right;
    line-height: 48px;
  }
  .tbl .right .rowDiv .ssDiv{
    display: inline-block;
    width: 130px;
    height: 100%;
    margin-left: 134px;
    box-sizing: border-box;
    line-height: 48px;
  }
  .tbl .right .rowDiv .ssDiv input{
     width: 100%;
     height: 90%;
     border: 0px;
     background: #F8F8FF;
  }

  .addOld{
    position: relative;
    right: -341px;
    top: -25px;
    width: 100px;
    background: #E0ECFF;
    border-radius: 10px;
  }
  .addOld:hover{
    opacity: 1;
  }
  .file{
    width: 63px;
    height: 33px;
    background: #5FB878 !important;
    border-radius: 10px;
    margin-top: 7px;
    margin-left: 21px;
    opacity: 0.8;
    text-align: center;
    line-height: 33px;
  }
  .file:hover{
    opacity: 1;
    cursor: pointer;
  }
  .ssDiv input[type='button']{
    border-radius: 10px;
    background: #5FB878 !important;
    opacity: 0.8;
  }
  .ssDiv input[type='button']:hover{
    opacity: 1;
  }
  #file_c{
    height: 25px;
    width: 140px;
  }
  .lastRow{
    display: none;
  }
  .lastRowToShow{
    display: block !important;
  }
  .ssDiv select{
    width: 143px;
    height: 44px;
    outline: none;
    border: 0px;
    background: #F8F8FF;
  }
</style>
<body>
<div id="table1">
  姓名:<input type="text" class="input_search"/>
  <button style="margin-left: 10px;" onclick="search(this)">查询</button><br/>
  <input type="button" value="增加" onclick="addOldMan()" class="addOld"/>
  <table class="table1" width="400" cellspacing="0" cellpadding="0">
    <tbody>
    <tr><th colspan="4" style="text-align: center;background-color: #E8F1FF">老人信息</th>
      <th colspan="4" style="text-align: center;background-color: #E8F1FF">
      </th></tr>
    <tr style="background-color: #F4F4F4">
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>号码</th>
      <th>操作</th>
    </tr>
    <tr v-for="oldman in oldmans">
      <th>{{oldman.oid}}</th>
      <th>{{oldman.oname}}</th>
      <th>{{oldman.oage}}</th>
      <th>{{oldman.otel}}</th>
      <th><a href="javascript:void(0)" onclick="getUpdate(this)">修改</a><a href="javascript:void(0)" onclick="getDetailed(this)">详细</a></th>
    </tr>
    </tbody>
  </table>
 <form method="post" enctype="multipart/form-data" id="myform">
   <div class="tbl">
     <div class="left">
       <img src="" class="oimg"/>
     </div>
     <div class="right">
       <div class="rowDiv">
         <div class="spDiv">
           姓名：
         </div>
         <div class="ssDiv ">
           <input type="text" class="oname" name="oname"/>
         </div>
         <div class="spDiv">
           性别：
         </div>
         <div class="ssDiv">
           <input type="text" class="osex" name="osex"/>
         </div>
         <div class="spDiv">
           民族：
         </div>
         <div class="ssDiv">
             <select name="onation" class="onation">
                 <option></option>
             </select>
         </div>
       </div>
       <div class="rowDiv">
         <div class="spDiv">
           年龄：
         </div>
         <div class="ssDiv">
           <input type="text" class="oage" name="oage"/>
         </div>
         <div class="spDiv">
           身份证号码：
         </div>
         <div class="ssDiv">
           <input type="text" class="ocardnum" name="ocardnum"/>
         </div>
         <div class="spDiv">
           电话号码：
         </div>
         <div class="ssDiv">
           <input type="text" class="otel" name="otel"/>
         </div>
       </div>
       <div class="rowDiv">
         <div class="spDiv">
           出生年月：
         </div>
         <div class="ssDiv">
           <input type="text" class="obirth" name="obirth"/>
         </div>
         <div class="spDiv">
           家庭住址：
         </div>
         <div class="ssDiv">
           <input type="text" class="oaddr" name="oaddr"/>
         </div>
         <div class="spDiv">
           床位：
         </div>
         <div class="ssDiv">
             <select name="obid" class="obid">
                 <option></option>
             </select>
         </div>
       </div>

       <div class="rowDiv">
         <div class="spDiv">
           紧急联系人：
         </div>
         <div class="ssDiv">
           <input type="text" class="oec" name="oec"/>
           <input type="text" class="oid" name="oid" hidden/>
         </div>
         <div class="spDiv">
           紧急联系人电话：
         </div>
         <div class="ssDiv">
           <input type="text" class="oectel" name="oectel"/>
         </div>
       </div>
       <div class="rowDiv">
         <div class="spDiv">
           所属服务点：
         </div>
         <div class="ssDiv">
           <input type="text" class="osp" name="osp"/>
         </div>
         <div class="spDiv">
           服务类型：
         </div>
         <div class="ssDiv">
           <input type="text" class="ost" name="ost"/>
         </div>
         <div class="spDiv">
           服务状态：
         </div>
         <div class="ssDiv">
           <input type="text" class="oss" name="oss"/>
         </div>
       </div>
       <div class="rowDiv">
         <div class="spDiv">
           慢性病：
         </div>
         <div class="ssDiv">
           <input type="text" class="ocd" name="ocd"/>
         </div>
         <div class="spDiv">
           失能情况：
         </div>
         <div class="ssDiv">
           <input type="text" class="odc" name="odc"/>
         </div>
         <div class="spDiv">
           残疾情况：
         </div>
         <div class="ssDiv">
           <input type="text" class="odisability" name="odisability"/>
         </div>
       </div>


        <div class="rowDiv lastRow" >
          <div class="spDiv">
            头像：
          </div>
          <div class="ssDiv">
            <input type="file" id="file_c" name="oimage" onchange="changeImg(this)"/>
          </div>
          <div class="spDiv">
            操作
          </div>
          <div class="ssDiv">
            <input type="button" value="提交" id="btn"/>
          </div>
         <!-- <div class="ssDiv">
            <input type="button" value="修改" id="btn1"/>
          </div>-->
        </div>


   </div>
   </div>
 </form>
</div>
</body>
<script src="js/JQuery2.1.4.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script src="js/jquery.form.js"></script>
<script>
  function changeImg(obj){
    var path = getObjectURL( obj.files[0]);
    $(".oimg").attr("src",path);
  };
  function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
      url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
  }

  let app = new Vue({
    el:"#table1",
    data:{
      oldmans:{}
    },
    mounted:function() {
      this.findAllOldman();
    },
    methods:{
      findAllOldman:function (){
        axios.post("/oldman/findAllOldman").then(rs =>{
            if (rs.status == 200){
              if (rs.data.code == 200){
                this.oldmans = rs.data.data;
              }
            }
        });
      }
    }
  });
  function search(obj){
     let val = $(".input_search").val();
     axios.post("/oldman/search",qs.stringify({val:val})).then(rs => {
        if (rs.status == 200){
          if (rs.data.code == 200){
            app.$data.oldmans = rs.data.data;
          }
        }
     })
  }

  //点击新增触发的事件
  function addOldMan(){
    $(".lastRow").addClass("lastRowToShow");
    /*$("#btn1").css("dispaly","none");*/
  };

  //点击详细按钮触发的事件
  function getDetailed(obj){
      var oid = $(obj).parent().siblings().eq(0).text();
      $(".oid").val(oid);
      var arr = app.$data.oldmans;
      $.each(arr, function(index){
        if (arr[index].oid == oid){
          console.log(arr[index]);
              $(".oname").val(arr[index].oname);
              $(".oage").val(arr[index].oage);
              $(".osex").val(arr[index].osex);
              $(".oaddr").val(arr[index].oaddr);
              $(".obirth").val(arr[index].obirth);
              $(".ocardnum").val(arr[index].ocardnum);
              $(".ocd").val(arr[index].ocd);
              $(".odc").val(arr[index].odc);
              $(".odisability").val(arr[index].odisability);
          $(".oec").val(arr[index].oec);
          $(".oectel").val(arr[index].oectel);
          $(".onation").val(arr[index].onation);
          $(".osp").val(arr[index].osp);
          $(".oss").val(arr[index].oss);
          $(".ost").val(arr[index].ost);
          $(".otel").val(arr[index].otel);
          $(".obid").html("<option value='"+arr[index].obid+"'>"+arr[index].obed+"</option>");
          console.log(arr[index].obid);
          $(".oimg").attr("src",arr[index].oimg);
         /* $("#file_c").val(arr[index].oimg);*/
        }
      })
  }

  function getUpdate(obj){
     getDetailed(obj);
    $(".lastRow").addClass("lastRowToShow");
  }
  //点击提交触发的事件
  $(function(){
    $("#btn").click(function(){
      $("#myform").attr("action","/oldman/addOldman");
      $("#myform").submit();
    });
    $("#myform").ajaxForm(function(data){
      window.location.reload();
    });
  /*  $("#btn1").click(function(){
      $("#myform").attr("action","/oldman/updateOldman");
      $("#myform").submit();
    });*/
    //床位查找
    $.post("/oldman/findBedType",'',function(res){
       var str = "<option></option>";
       $.each(res.data,function(index,item){
          str += "<option value='"+item.bid+"'>"+item.bname+"</option>";
       });
       $(".obid").html(str);
    });
    $.post("/oldman/findNationType",'',function(res){
      var str = "<option></option>";
      $.each(res.data,function(index,item){
        str += "<option value='"+item.nid+"'>"+item.nname+"</option>";
      });
      $(".onation").html(str);
    })
  })


</script>
</html>